<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./CSS/style.css" />
  </head>
  <body>
    <!-- 这里是标题导航 -->
    <div class="head">
      <div class="head1">在线学习网站</div>
      <div class="head2">课程分类</div>
      <div class="head3"></div>
      <div class="xiala">
        <a href="#biancheng">编程</a>
        <a href="#English">大学英语</a>
        <a href="#duomeiti">多媒体技术</a>
      </div>
    </div>
    <!-- 这里是轮播图的位置 -->
    <div class="lunbo">


      <div class="last"><</div>
      <div class="next">></div>

      <div class="foot">
        <li class="xuanzhong"></li>
        <li></li>
        <li></li>
        <li></li>
      </div>


    </div>

    <!-- 这里是课程列表位置 -->
    <div class="fengexian"></div>
    <div class="lessonlist Code">
      <h2 id="biancheng">编程</h2>
      <div class="list java">
        java
        <div class="arr"><</div>
      </div>
      <div class="javacard listcard">
        <div>
          <a href="./编程视频/java视频1.html"
            ><img src="imges/java.png" class="java-img"
          /></a>
        </div>
        <div>
          <a href="./编程视频/java视频2.html"
            ><img src="imges/Java2.png" class="java-img"
          /></a>
        </div>
        <div>
          <a href="./编程视频/java视频3.html"
            ><img src="imges/Java3.png" class="java-img"
          /></a>
        </div>
      </div>
      <div class="list web">
        前端web
        <div class="arr"><</div>
      </div>
      <div class="webcard listcard">
        <div>
          <a href="./编程视频/web视频.html"
            ><img src="imges/前端web.png" class="java-img"
          /></a>
        </div>
        <div>
          <a href="./编程视频/web视频2.html"
            ><img src="imges/前端2.png" class="java-img"
          /></a>
        </div>
        <div>
          <a href="./编程视频/web视频3.html"
            ><img src="imges/前端3.png" class="java-img"
          /></a>
        </div>
      </div>
      <div class="list c">
        c/c++
        <div class="arr"><</div>
      </div>
      <div class="ccard listcard">
        <div>
          <a href="./编程视频/c  视频.html"
            ><img src="imges/c语言.png" class="java-img"
          /></a>
        </div>
        <div>
          <a href="./编程视频/c++视频2.html"
            ><img src="imges/c2.png" class="java-img"
          /></a>
        </div>
        <div>
          <a href="./编程视频/c++视频3.html"
            ><img src="imges/c3.png" class="java-img"
          /></a>
        </div>
      </div>
      <div class="list python">
        python
        <div class="arr"><</div>
      </div>
      <div class="pythoncard listcard">
        <div>
          <a href="./编程视频/python视频.html"
            ><img src="imges/python.png" class="java-img"
          /></a>
        </div>
        <div>
          <a href="./编程视频/python视频2.html"
            ><img src="imges/python2.png" class="java-img"
          /></a>
        </div>
        <div>
          <a href="./编程视频/python视频3.html"
            ><img src="imges/python3.png" class="java-img"
          /></a>
        </div>
      </div>
    </div>
    <div class="fengexian"></div>
    <!-- 大学英语 -->
    <div class="lessonlist English">
      <h2 id="English">大学英语</h2>
      <div class="list AB">
        ab级
        <div class="arr"><</div>
      </div>
      <div class="ABcard listcard_english">
        <div>
          <a href="大学英语/ab级1.html"><img src="imges/ab1.png" alt="" /></a>
        </div>
        <div>
          <a href="大学英语/ab级2.html"><img src="imges/ab2.png" alt="" /></a>
        </div>
        <div>
          <a href="大学英语/ab级3.html"><img src="imges/ab3.png" alt="" /></a>
        </div>
        <div>
          <a href="大学英语/ab级4.html"><img src="imges/ab4.png" alt="" /></a>
        </div>
      </div>
      <div class="list level4">
        英语四级
        <div class="arr"><</div>
      </div>
      <div class="level4card listcard_english">
        <div>
          <a href="大学英语/四级1.html"><img src="imges/四级1.png" alt="" /></a>
        </div>
        <div>
          <a href="大学英语/四级2.html"><img src="imges/四级2.png" alt="" /></a>
        </div>
        <div>
          <a href="大学英语/四级3.html"><img src="imges/四级3.png" alt="" /></a>
        </div>
        <div>
          <a href="大学英语/四级4.html"><img src="imges/四级4.png" alt="" /></a>
        </div>
      </div>
      <div class="list level6">
        英语六级
        <div class="arr"><</div>
      </div>
      <div class="level6card listcard_english">
        <div>
          <a href="大学英语/六级1.html"><img src="imges/六级1.png" alt="" /></a>
        </div>
        <div>
          <a href="大学英语/六级2.html"><img src="imges/六级2.png" alt="" /></a>
        </div>
        <div>
          <a href="大学英语/六级3.html"><img src="imges/六级3.png" alt="" /></a>
        </div>
        <div>
          <a href="大学英语/六级4.html"><img src="imges/六级4.png" alt="" /></a>
        </div>
      </div>
    </div>
    <div class="fengexian"></div>
    <!-- 多媒体技术 -->
    <div class="lessonlist duomeiti">
      <h2 id="duomeiti">多媒体技术</h2>
      <div class="list cut">
        <div>声音/视频剪辑</div>
        <div class="arr"><</div>
      </div>
      <div class="cutcard listcard">
        <div>
          <a href="多媒体技术/AU1.html"
            ><img src="imges/AU1.png" alt="" style="width: 100%; height: 100%"
          /></a>
        </div>
        <div>
          <a href="多媒体技术/AU2.html"
            ><img src="imges/AU2.png" alt="" style="width: 100%; height: 100%"
          /></a>
        </div>
        <div>
          <a href="多媒体技术/PR1.html"
            ><img src="imges/PR1.png" alt="" style="width: 100%; height: 100%"
          /></a>
        </div>
        <div>
          <a href="多媒体技术/PR2.html"
            ><img src="imges/PR2.png" alt="" style="width: 100%; height: 100%"
          /></a>
        </div>
      </div>
      <div class="list ps">
        图片处理
        <div class="arr"><</div>
      </div>
      <div class="pscard listcard">
        <div>
          <a href="多媒体技术/PS1.html"
            ><img src="imges/PS1.png" alt="" style="width: 100%; height: 100%"
          /></a>
        </div>
        <div>
          <a href="多媒体技术/PS2.html"
            ><img src="imges/ps2.png" alt="" style="width: 100%; height: 100%"
          /></a>
        </div>
        <div>
          <a href="多媒体技术/PS3.html"
            ><img src="imges/PS3.png" alt="" style="width: 100%; height: 100%"
          /></a>
        </div>
        <div>
          <a href="多媒体技术/PS4.html"
            ><img src="imges/PS4.png" alt="" style="width: 100%; height: 100%"
          /></a>
        </div>
      </div>
    </div>
    <div class="fengexian"></div>
    <div class="lessonlist"><h2>api数据的获取</h2><br>
    <button class="huoqu">点击获取数据</button><br>
    <div class="shujv"></div>
</div>
    <!-- 有待制作 -->

    <div class="about">
      <div class="guanyu"><h2>关于我们</h2><br>
      <a target="_blank" href="https://gitee.com/chen-zanji/creating-web-group-assignments.git" style="font-size: 1.5rem;">码云仓库</a><br>
    <a target="_blank" href="https://player.bilibili.com/player.html?isOutside=true&aid=112699505641606&bvid=BV1F63veXEwc&cid=500001599786435&p=1">介绍视频</a></div>

      <div>
        <div class="touxiang"><img src="./陈赞吉.jpg" alt=""></div>
        <p>陈赞吉</p>
        <p>负责内容：首页制作</p>
      </div>
      <div>
        <div class="touxiang"><img src="./覃俊辉.jpg" alt=""></div>
        <p>覃俊辉</p>
        <p>负责内容：课程板块</p>
      </div>
      <div>
        <div class="touxiang"><img src="./周鑫鹏.jpg" alt=""></div>
        <p>周鑫鹏</p>
        <p>负责内容：课程板块</p>
      </div>
      <div>
        <div class="touxiang"><img src="./罗乐.jpg" alt=""></div>
        <p>罗乐</p>
        <p>负责内容：课程板块</p>
      </div>
      <div>
        <div class="touxiang"><img src="./陈建宇.jpg" alt=""></div>
        <p>陈建宇</p>
        <p>负责内容：素材整理</p>
      </div>
      <div>
        <div class="touxiang"><img src="./李佳翔.jpg" alt=""></div>
        <p>李佳翔</p>
        <p>负责内容：介绍视频录制</p>
      </div>
    </div>

    <script>
    let btn = document.querySelector('.huoqu')
    let sj = document.querySelector('.shujv')
    let jilu = true

    btn.addEventListener('click',function(){
      if (jilu == true){
        fetch('https://demo.codelover.club/api/curriculum/50')
        .then(response => response.json())
        // .then(data => console.log(data.data.coursedata))
        .then(data =>sj.innerText =  JSON.stringify(data, data.coursedata ,2))
        jilu = false
        btn.innerHTML = "点击清除"
        console.log(jilu);
      } else{
        sj.innerText = null
        jilu = true
                btn.innerHTML = "点击获取数据"
        console.log(jilu);

      }

    })
    </script>
    <script src="./js/tool.js"></script>
    
  </body>
</html>

